<template>
  <div class="storeMap">
  		<div class="cafeStoreHeader">
  			<div class="cafeStoreHeaderImg" @click="$router.go(-1)">
					<img src="../../assets/image/cafe/goBack.png" alt="" />
				</div>
				<div class="cafeStoreHeaderTitle">
					<p>4S门店</p>
				</div>				
			</div>
    	<div id="container"></div>
    	<div v-if="isShow" class="storeInfo">
    		<div class="storeInfoContainer">
    				<div class="storeInfoImg">
		    				<img :src="storeData.SHOP_PHOTO" alt="" />
		    		</div>
		    		<div class="storeInfoText">
		    				<div class="storeInfoText1">
		    						<h2>{{storeData.SHOP_NAME}}</h2>
		    						<p>{{storeData.DISTANCE/1000|keepTwoDot}}km</p>
		    				</div>
		    				<div class="storeInfoText2">
		    						<p>{{storeData.SHOP_ADDRESS}}</p>
		    				</div>
		    				<div class="storeInfoText3">
		    						<p>服务品牌&thinsp;:&thinsp;{{storeData.MAIN_BRAND}}</p>
		    				</div>
		    		</div>
		    		<div class="storeInfoWay">
		    				<div class="storeInfoWayTel" @click="callTel">
		    					<img src="../../assets/image/cafe/telephone.png" alt="" />	
		    					<!--注意a标签里面变量的写法start-->
		    					<a id="callTel" style="display:none;" :href="'tel:'+storePhone">拨打</a>
		    					<!--注意a标签里面变量的写法end-->
		    				</div>
		    				<div class="storeInfoWayGo" @click="goToWay">
		    					<!--<img src="../../assets/image/cafe/goHere.png" alt="" />-->	
		    				</div>		    				
		    		</div>
    		</div>		    		
    	</div>
  </div>
</template>
<script>
/*4S门店地图*/
import {XHeader} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
import positionDefault from '../../assets/image/cafe/2.png';
import positionSelected from '../../assets/image/cafe/3.png';
import location from '../../assets/image/cafe/yourLocation2.png';
export default {
  name:"storeMap",
  // 数据
  data(){

    return{
    	userId:'',
    	city:'',//城市
			latlgt:'',//经纬度
    	MAP:'',//地图实例
    	allData:'',//所有数据
    	yourPosition: {}, // 当前位置,经纬度表示      
      isShow:false,//是否显示
      storeData:'',//门店数据
      storePhone:'',//门店电话
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    this.city = sessionStorage.getItem('city');//城市
		this.latlgt = sessionStorage.getItem('latlgt');//经纬度
    //获取4S店列表(3.9版本)
    let obj = {};
    obj.REGION = '';
    obj.COORDINATE = this.latlgt;
    obj.CITY = this.city;
    obj.MAINBRAND = '';
    obj.SORTING = 0;
    this.$fetchPost('/ServShopWeb/get4SShop',obj).then(res=>{ 	
    				//console.dir(res);
            if(res.STATUS_CODE == 1){
            		this.allData = res.RESULT_DATA;
            }                                 
    },err=>console.log(err));
    
  },
  // el被创建，并挂载到实例上
  mounted(){
			let that = this;
	    // 生成地图实例
	    that.MAP = new BMap.Map("container");
	    let point = new BMap.Point(114.02597366, 22.54605355);  // 创建点坐标  
	    that.MAP.enableScrollWheelZoom();// 开启滚轮缩放	 
			that.MAP.addControl(new BMap.OverviewMapControl());			// 添加缩略地图控件
	    that.MAP.centerAndZoom(point, 16); // 初始化地图，设置中心点坐标和地图缩放级别 	    
			// 获取定位
    	that.getPosition();      					    
  },
  // 方法（实例中的方法）-----------
  methods:{
    	//获取定位
    	getPosition(){
    		 let that = this;
    		 let geolocation = new BMap.Geolocation();
				 geolocation.getCurrentPosition(function(r){			
				 		var myIcon = new BMap.Icon(
				 			location//直接写相对路径不会显示，需要import
				 			,new BMap.Size(54,72)
				 		,{anchor: new BMap.Size(30,70)}//这个参数慢慢测
				 		);
						let mk = new BMap.Marker(r.point,{icon:myIcon});
						//let mk = new BMap.Marker(r.point);
						mk.disableMassClear();//禁止覆盖物在map.clearOverlays方法中被清除
						that.MAP.addOverlay(mk);//将覆盖物添加到地图中
						that.MAP.panTo(r.point);//将地图的中心点更改为给定的点
						that.yourPosition.lng = r.point.lng;//经度
		        that.yourPosition.lat = r.point.lat;//纬度		        		        
		        setTimeout(()=>that.getAllStoreLngLat(),1000);		        
		        //监听事件
		        mk.addEventListener("click",function(){
		        		//点击定位到中心
						   	that.MAP.panTo(new BMap.Point(r.point.lng,r.point.lat));						   	
						});
				});
					
    	},
    	//获取所有门店经纬度
    	getAllStoreLngLat(){    	
    			let that = this;    			
    			for(let i=0,len=this.allData.length;i<len;i++){
    					let str = this.allData[i].COORDINATE.split(',');       					
    					let point = new BMap.Point(str[0],str[1]);
    					
							var myIcon = new BMap.Icon(
				 			positionDefault//直接写相对路径不会显示，需要import
				 			,new BMap.Size(54,72)
				 			,{anchor: new BMap.Size(30,70)}//这个参数慢慢测
				 			);
						let marker = new BMap.Marker(point,{icon:myIcon});
							//let marker = new BMap.Marker(point);
							that.MAP.addOverlay(marker);
							//单个门店的点击事件
							marker.addEventListener("click",function(e){										
						   			that.isShow = true;
						   			that.storeData = that.allData[i];
						   			that.storePhone = that.storeData.SERV_PHONE;
						   			console.dir(that.storeData);						   			
						   			/*---点击放大图片start---*/
						   			var myIcon2 = new BMap.Icon(
							 			positionSelected//直接写相对路径不会显示，需要import
							 			,new BMap.Size(80,106)
							 			//,{anchor: new BMap.Size(35,85)}//这个参数慢慢测35.85
							 			,{anchor: new BMap.Size(34,75)}//这个参数慢慢测34.75
							 			);
							 			let marker2 = new BMap.Marker(point,{icon:myIcon2});
							 			that.MAP.addOverlay(marker2);
							 			/*---点击放大图片end---*/
							});    				
    			}
    	},    	
    	//拨打电话
    	callTel(){    		
    		let dom = document.getElementById('callTel');    			    				
    				dom.click();
    				dom.click();
    	},
    	//出行方式
    	goToWay(){
    		//alert('暂不支持!');
    		//console.dir(this.storePhone);
    	},
  },
  // 子组件
  components:{
    XHeader
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.storeMap{
		height:100%;
  	#container{
  		width:100%;
  		height:100%;  		
  	}
  	.cafeStoreHeader{
			width:100%;
			height:0.8rem;			
			display:flex;
			background:#fff;	
			position:fixed;
			top:0;
			z-index:99;		
			.cafeStoreHeaderTitle{	
				width:100%;	
				display:flex;
				justify-content:center;				
				p{						
					align-self:center;
					font-size:0.36rem;
					color:#000;
				}
			}
			.cafeStoreHeaderImg{
				height:100%;		
				width:0.6rem;			
				display:flex;	
				justify-content:center;
				position:absolute;
				left:0.3rem;
				bottom:0;									
				img{								
					align-self:center;	
					width:0.2rem;
					height:0.37rem;
				}
			}
		}
  	.storeInfo{
  			position:fixed;
  			bottom:0.2rem;
  			left:0.3rem;
  			width:6.9rem;
  			height:2.05rem;
  			z-index:99999;
  			background:#ffffff;
  			border-radius:0.2rem;
  			display:flex;
  			justify-content:center;
  			box-shadow:4px 4px 4px #9F9F9F;
  			.storeInfoContainer{
  				align-self:center;
  				width:6.55rem;
  				height:1.5rem;  				
  				display:flex;
  				.storeInfoImg{
  					width:2rem;
  					height:1.5rem;
  						img{
  								width:2rem;
  								height:1.5rem;
  						}
  				}
  				.storeInfoText{
  					 width:3.65rem;
  					 height:1.5rem;  					 
  					 display:flex;
  					 flex-flow:column;
  					 .storeInfoText1{
  					 	display:flex;  					 	
  					 	height:0.5rem;  					 	
  					 	position:relative;  					 	
				 			h2{
				 				width:2.6rem;
				 				height:0.5rem;				 							 			
			 					align-self:center;
				 				margin-left:0.2rem;
				 				font-size:0.3rem;
								font-weight:bold;
								color:#1a1a1a;
								text-align:left;
								/*让文字只显示2行，其余用...代替start*/
                overflow : hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                /*让文字只显示2行，其余用...代替end*/
				 			}
				 			p{				 				
				 				position:absolute;
				 				top:0;
				 				right:0.2rem;
				 				font-size:0.22rem;
								color:#9b9b9b;
				 			} 					 		
  					 }
  					 .storeInfoText2{  					 	
  					 	height:0.7rem;
  					 	display:flex;
  					 	flex-flow:column;
  					 	justify-content:center;
  					 		p{  				
  					 			margin-left:0.2rem;	 			
  					 			font-size:0.24rem;
									color:#9b9b9b;
									text-align:left;
									/*让文字只显示2行，其余用...代替start*/
	                overflow : hidden;
	                text-overflow: ellipsis;
	                display: -webkit-box;
	                -webkit-line-clamp: 2;
	                -webkit-box-orient: vertical;
	                /*让文字只显示2行，其余用...代替end*/
  					 		}
  					 }
  					 .storeInfoText3{
  					 	height:0.4rem;
  					 		p{
  					 			margin-left:0.2rem;
  					 			font-size:0.22rem;
									color:#ec2121;
									font-weight:lighter;
									text-align:left;
									/*让文字只显示2行，其余用...代替start*/
	                overflow : hidden;
	                text-overflow: ellipsis;
	                display: -webkit-box;
	                -webkit-line-clamp: 1;
	                -webkit-box-orient: vertical;
	                /*让文字只显示2行，其余用...代替end*/
  					 		}
  					 }
  				}
  				.storeInfoWay{
  					width:0.9rem;
  					height:1.5rem;  					
  					position:relative;
  					.storeInfoWayTel{
  						position:absolute;
  						left:0;
  						top:0;
  						display:flex;
  						img{
  							width:0.66rem;
  							height:0.66rem;
  						}
  					}
  					.storeInfoWayGo{
  						position:absolute;
  						left:0;
  						bottom:0;
  						display:flex;
  						img{
	  						width:0.66rem;
	  						height:0.66rem;
	  					}	
  					}
  					
  				}
  			}
  	}
}
</style>